<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局 </title>
</head>
<body>
    <!--菜单-->
    <div id="header" style="border: 1px solid red solid;">
        <img src="https://www.runoob.com/wp-content/themes/runoob/assets/img/runoob-logo.png" alt="">   
        <input type="text" style="height: 50px;">
        </div>
        <div style ="width: 100%; height: 50px;background-color: green; font-size: 25px;color: aliceblue;">
            <a style="color: aliceblue;" href=""><span>首页</span></a>
            <a style="color: aliceblue;" href=""><span>HTML</span></a>
            <a style="color: aliceblue;"><span>CSS</span></a>
            <a style="color: aliceblue;"><span>JAVASCRPT</span></a>
            <a style="color: aliceblue;"><span>GO</span></a>
        </div>
<!--主区域-->
<div style="border: 1px solid red;width: 100%;height: 500px;">
</div>
<!--底部-->
<div style="width: 100%;background-color: aquamarine;
height: 50px;text-align: center;font-size: 20px;color: rgb(7, 79, 17);">\
<span>版权所有：杨</span>
<span>Email:yangyang@qq.com</span>
</div>
</body>
</html>